import React,  { Component } from 'react';
import { ItemTypes } from '../../pages/reactDndDemo/consts/index.js';
import { DragSource } from 'react-dnd';

const knightSource = {
  beginDrag(props) {
    return {};
  }
};

function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }
}

function Knight({ connectDragSource, isDragging, connectDragPreview }) {
  const img = new Image();
  img.src = '';
  connectDragPreview(img);
  
  return (
    connectDragSource(
      <div style={{
        opacity: isDragging ? 0.5 : 1,
        fontSize: 25,
        fontWeight: 'bold',
        cursor: 'move'
      }}>
        ♘
      </div>
    )
  );
}

export default DragSource(ItemTypes.KNIGHT, knightSource, collect)(Knight);